console.log('snabbdom 源码解析');

import {
    init,
    classModule,
    propsModule,
    styleModule,
    eventListenersModule,
    h,
} from "snabbdom";

// 1.创建出一个 patch 函数
const patch = init([classModule, propsModule, styleModule, eventListenersModule])

// 2.创建一个虚拟节点
var myVnode = h('a', {
    props: {
        href: 'http://www.atguigu.com',
        target: '_blank'
    }
}, '尚硅谷')

console.log(myVnode);
/* {
    children: undefined
    data: {
        props: {
            href: 'http://www.atguigu.com',
            target: '_blank'
        }
    }
    elm: a
    key: undefined
    sel: "a"
    text: "尚硅谷"
} */

var myVnode2 = h('div', {
    class: 'ss'
}, '我是一个盒子')

// 3.获取页面div，调用patch函数 ，是虚拟节点上树
// 页面只会显示 myVnode 的内容，一个标签内容，无论调用多少次patch，都只会显示第一次patch函数的内容
// 获取多个标签，就可以显示多个标签内容
const container = document.getElementById('container')
// const container2 = document.getElementById('container2')
patch(container, myVnode)
patch(container, myVnode2)